<template>
    <div>
        <common-card
            title="累计订单量"
            :value="orderToday"
        >
        <template>
            <v-chart :options="getOptions()"></v-chart>
        </template>
        <template v-slot:footer>
            <span>昨日订单量 </span>
            <span class="emphasis">{{orderLastDay}}</span>
        </template>
        </common-card>
    </div>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'
import commonDataMixin from '@/mixins/commonDataMixin' //引入inject数据
export default {
    mixins: [commonCardMixin,commonDataMixin], //引入有公共特性的改为mixin方式引入，减少共用代码的编写
    methods: { 
        getOptions() { 
            return this.orderTrend.length > 0 ? { 
                xAxis: { 
                type: 'category',//如果设置了 type 是 'category'，但没有设置 axis.data，
                                 //则 axis.data 的内容会自动从 series.data 中获取
                show: false,   //隐藏x轴
                boundaryGap: false //去除与y轴间距
                },
                yAxis: { 
                    show: false //隐藏y轴
                },
                series: [{ //添加系列
                    type: 'line', //设置为折线图
                    data: this.orderTrend,//
                    areaStyle: { //将折线图强化为面积图
                        color: 'purple' //颜色为紫色
                    },
                    lineStyle: { 
                        width: 0 //设置折线宽度为0，隐藏折线
                    },
                    itemStyle: { 
                        opacity: 0 //设置点透明度为0 ，隐藏点
                    },
                    smooth: true  //让折线更加光滑
                }],
                grid: { //设置组件离容器各边的距离都为0
                    top: 0,
                    bottom: 0,
                    left: 0,
                    right: 0
                }
            }: null
        } 
    },
};
</script>

<style lang="scss" scoped>

</style>